﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<div id="app">
	<table width="100%">
		<tr>
			<td>
				<p color="black">您正在做的业务是:人力资源--权限管理--添加用户</p>
			</td>
		</tr>
		<tr>
            <td align="right">
                <input type="button" value="提 交" v-on:click="Add()" class="BUTTON_STYLE1">
                <input type="button" value="返回" class="BUTTON_STYLE1" v-on:click="goBack()">
            </td>
		</tr>
	</table>
	<table width="100%" border="1" cellpadding=0 cellspacing=1
		   bordercolorlight=#848284 bordercolordark=#eeeeee
		   class="TABLE_STYLE1">
		<tr>
			<td width="10%" class="TD_STYLE1">
				角色名称
			</td>
			<td width="40%" class="TD_STYLE2">
				<el-input style="width: 240px" v-model="ur.rolesName" />
			</td>
			<td width="10%" class="TD_STYLE1">
				角色名称
			</td>
			<td class="TD_STYLE2">
				<el-input style="width: 240px" v-model="ur.rolesInstruction" />
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				是否可用
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="ur.rolesIf"
						   placeholder="请选择"
						   size="large"
						   style="width: 240px">
					<el-option v-for="item in options"
							   :label="item.text"
							   :value="item.value" />
				</el-select>
			</td>
		</tr>
	</table>
</div>
<script>
	const { createApp, ref, reactive, computed, watchEffect } = Vue;
	var app = createApp({
		setup() {
			let ur = reactive({
				rolesName: '',
				rolesInstruction: '',
				rolesIf: '',
			})
			const options = [
				{ text: "是", value: "True" },
				{ text: "否", value: "False" },
			];
			function Add() {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/Roles/RolesAdd', {
					rolesName: ur.rolesName,
					rolesInstruction: ur.rolesInstruction,
					rolesIf: ur.rolesIf
				}).then(res => {
					alert("新增成功");
					window.location.href = `/Roles/Index`;
				})
			}
            //返回
            function goBack() {
                history.back();
            }
			return {
				ur,
				options,
                Add, goBack
			}
		}
	})
	app.use(ElementPlus);
	app.mount("#app");
</script>
<style type="text/css">
	body {
		background-color: #FFFFBB;
		border: 1px solid #FFDB6F;
		display: block;
		margin: 8px;
	}

</style>
